<template>
    <el-dialog :model-value="props.visible" title="添加通用配件" width="40%" @close="handleClose">
        <el-image class="auxiliary-image" fit="contain" :src="props.auxiliary.imageUrl"></el-image>
        <el-form ref="formRef" :model="formData">
            <el-form-item label="产品名称">{{ props.auxiliary.specsDetail }}</el-form-item>
            <el-form-item label="输入数量" prop="number">
                <el-input style="width: 40%" type="number" v-model.number="formData.number" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="是否专版" prop="specialFlag">
                <el-select style="width: 40%" v-model="formData.specialFlag" placeholder="请选择">
                    <el-option label="是" value="1"></el-option>
                    <el-option label="否" value="0"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button  type="primary" @click="handleSubmit" >确 定</el-button>
                <el-button @click="handleClose">取 消</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { type FormInstance } from 'element-plus';
import { FormAccessory } from '@/api/sj/productManagement/customizedOrder/types';

const props = defineProps<{
    visible: boolean,
    auxiliary: any
}>();
const emits = defineEmits(['close','submit']);

const formRef = ref<FormInstance>()

const formData = ref<FormAccessory>({
    customizedProductId: undefined,
    number: undefined,
    specialFlag: '0',
    specsDetail: undefined,
    productCategoriesType: undefined,
    productSubcategoryType: undefined,
    productId: undefined,
    imageUrl: undefined
});

watch(()=>props.auxiliary,(newData)=>{
    formData.value.specsDetail = newData.specsDetail;
    formData.value.productCategoriesType = newData.productCategoriesType;
    formData.value.productSubcategoryType = newData.productSubcategoryType;
    formData.value.productId = newData.auxiliaryId;
    formData.value.imageUrl = newData.imageUrl;
},{deep:true});

const handleClose = () => {
    formRef.value?.resetFields();
    emits('close');
};

const handleSubmit = () => {
    console.log(formData.value);
    emits('submit', {...formData.value});
    handleClose();
};
</script>

<style lang="scss" scoped>
.auxiliary-image{
    width: 100%;
    height: 400px;
}
</style>